<template>
	<view class="drawer">
		<scroll-view class="uni-swiper-tab" scroll-x :scroll-left="scrollLeft">
			<view @click="onClick(0)" class="swiper-tab-list uni-bold" >
				<label :class="0 == tabIndex ? 'active' : ''">自选</label>				
			</view>
			<view @click="onClick(1)" class="swiper-tab-list uni-bold" >
				<label :class="1 == tabIndex ? 'active' : ''" @tap="showModal" data-target="DrawerModalL" >{{platform==null?'平台':platform.name}}</label>
				<text class="cuIcon-triangledownfill" ></text>
			</view>
		</scroll-view>
		<view class="uni-list" v-if="tabIndex==0">
			<view class="uni-triplex-row padding-tb-xs" style="border-bottom: #E1E1E1 1px solid;">
				<view class="flex-sub text-left">
					<view class="text-grey text-sm"> 交易对</view>
				</view>
				<view class="flex-sub uni-row">
					<view class="flex-sub text-right">
						<view class="text-grey text-sm">最新价</view>
					</view>
					<view class="flex-sub text-right ">
						<view class="text-grey text-sm">24h</view>
					</view>
				</view>
			</view>
			<view class="uni-list-cell" v-for="(item, index) in marketList_[tabIndex]" :key="index" hover-class="uni-list-cell-hover">
				<view class=" uni-triplex-row padding-tb-xs" @click="onSelect(item)">
					<view class="flex-sub text-left">
						<view>BTC/USD</view>
						<view class="text-grey text-sm">OKEx当季</view>
					</view>
					<view class="flex-sub uni-row">
						<view class="flex-sub text-right">
							<view>$9400</view>
							<view class="text-grey text-sm">￥66080</view>
						</view>
						<view class="flex-sub text-right ">
							<view class="uni-up align-center padding-top" style="height: 100%;">+5%</view>
						</view>
					</view>
				</view>
				<!-- 	<view>
						<text class="uni-title uni-ellipsis" v-if="item.instrument_id!=null">{{item.instrument_id}}</text>
						<text class="uni-title uni-ellipsis" v-else>{{item.instrumentId}}</text>
					</view>
					<view class="uni-triplex-right">
						<text class="uni-h5" :class="item.change > 0 ? ' uni-up' : ' uni-down'">{{item.price}}111</text>
					</view> -->
			</view>
		</view>
		<view v-if="tabIndex==1" class="cu-modal drawer-modal justify-start" :class="modalName=='DrawerModalL'?'show':''" @tap="hideModal">
			<view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
				<view class="cu-list menu text-left">
					<view class="padding-left padding-tb-sm" style="border-bottom: #E1E1E1 1px solid;">
						<view class="content">
							<view class="text-grey text-sm">支持交易所</view>
						</view>
					</view>
					<view class="cu-item" v-for="(item,index) in platforms" :key="index">
						<view class="content" @tap="switchPlatform(item)" >
							<view>{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<scroll-view class="uni-list" v-if="tabIndex==1" scroll-y="true" style="height: 90vh;">
			<view class="uni-triplex-row padding-tb-xs" style="border-bottom: #E1E1E1 1px solid;">
				<view class="flex-sub text-left">
					<view class="text-grey text-sm"> 交易对</view>
				</view>
				<view class="flex-sub uni-row">
					<view class="flex-sub text-right">
						<view class="text-grey text-sm">最新价</view>
					</view>
					<view class="flex-sub text-right ">
						<view class="text-grey text-sm">24h</view>
					</view>
				</view>
			</view>
			<view class="uni-list-cell" v-for="(item, index) in markets" :key="index" hover-class="uni-list-cell-hover" >
				<view class=" uni-triplex-row padding-tb-xs" @click="onSelect(item)">
					<view class="flex-sub text-left">
						<view>{{item.symbol}}/{{item.pair2}}</view>
						<view class="text-grey text-sm">{{item.pair1}}</view>
					</view>
					<view class="flex-sub uni-row">
						<view class="flex-sub text-right">
							<view>${{item.price}}</view>
							<view class="text-grey text-sm">￥66080</view>
						</view>
						<view class="flex-sub text-right ">
							<view class="uni-up align-center padding-top" style="height: 100%;">+5%</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	var _self;
	export default {
		props: {
			areaList: {
				type: Array,
				default: () => {
					return []
				}
			},
			marketList: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				tabIndex: 0,
				scrollLeft: 0,
				modalName: null,
				platform:null,
				platforms:[],
				markets:[]
			}
		},
		mounted() {
			_self=this
		},
		computed: {
			areaList_() {
				return this.areaList;
			},
			marketList_() {
				return this.marketList;
			}
		},
		methods: {
			onClick(e) {
				this.tabIndex = e;
			},
			onChangeType() {
				this.tabIndex = Math.abs(this.tabIndex - 1);
			},
			
			switchPlatform(platformTarget){			
				console.log('switch platform')
				console.log(platformTarget)
				this.platform=platformTarget				
				this.freshTicker()
				_self.hideModal()
			},
			onSelect(e) {
				console.log("on select")
				console.log(e)
				this.$emit('onSelect', e)
			},
			showModal(e) {						
				uni.request({
					url: this.api+'/platforms/list',				
					method: 'GET',				
					success: res => {
						console.log('get platform')
						console.log(res.data.data)
						_self.platforms=res.data.data
					}				
				});				
				this.modalName = e.currentTarget.dataset.target				
			},
			hideModal(e) {
				this.modalName = null
			},
			freshTicker: function(){
				uni.request({
					url: this.api+'/platforms/markets?platform='+this.platform.code+'&type=future',
					method: 'GET',				
					success: res => {
						console.log('get tickers' )
						console.log(this.platform)
						console.log(res.data.data)
						_self.markets=res.data.data.data.markets
					}					
				});
			}
		}
	}
</script>

<style>
	.drawer {
		padding-top: 20upx;
		width: 100%;
	}

	.drawer .active {
		color: #0056B3;
		border-bottom: 6upx solid #0056B3;
	}
</style>
